<template>
	<div class="shopcart-container">
		<div class="cart_header">
		      <div class="cart_title">
		        <!-- 全选 -->
		        <van-checkbox checked-color="#000000" icon-size="18" v-model="isCheckedAll" @click="onSelectAll">全选
		        </van-checkbox>
		      </div>
		      <div class="cart_clear" @click="onClickDeleteAll">
		        <van-icon name="delete" />
		        <span>清空</span>
		      </div>
		    </div>
		<div style="background-color: white;">
			<van-row v-for="(item, i) in cartList" :key="i" type="flex" align="center">
				<van-col span="2">
					<!-- 复选框 -->
					<van-checkbox v-model="item.is_checked" @change="onCheckedChange(item)" />
				</van-col>
				<van-col span="5">
					<!-- 中间商品图片 -->
					<van-icon size="80" :name="APIDomainName + item.pic"></van-icon>
				</van-col>
				<van-col span="17">
					<van-row class="van-multi-ellipsis--l2 title">{{ item.title }}</van-row>
					<van-row  type="flex" align="center">
						<van-col span="8" class="price">¥{{ item.price }}</van-col>
						<van-col span="16" class="opration">
							<van-stepper v-model="item.count" @change="onCountChanged(item)" integer />
							<van-button text="删除" size="small" @click.prevent="onClickDeleteCartItem(item.id)" />
						</van-col>
					</van-row>
				</van-col>
			</van-row>
		</div>
	<!-- 商品结算区域 -->
	<van-cell title="商品结算" value="总计不含运费"></van-cell>
	<van-cell>
		<template #title>
			已勾选商品<span class="red">{{ getCheckedCount }}</span>件，总价<span class="red">¥{{ getCheckedAmount }}</span>
		</template>
	</van-cell>
	<!-- 结算按钮 -->
	<van-button type="primary" size="large" @click="onClickCreateOrder">去结算</van-button>
	</div>
</template>
 
<script>
	import { showConfirmDialog } from 'vant';
	import { getCartListAPI, updateCartCountAPI, updateCartCheckedAPI, deleteCartItemAPI,  deleteCartAllAPI,  
    updateCartCheckedAllAPI, } from "@/api/cart.js";
	export default {
		data() {
			return {
				cartList: [], //购物车列表数据
				isCheckedAll:false,  //是否全选
			};
		},
		//生命周期方法
		created() {
			this.getCartData();
		},
		computed: {     
		      getCheckedCount() {  //计算勾选记录总数
		        let sum = 0;
		        this.cartList.forEach((item) => {
		          if (item.is_checked) sum += 1;
		        });
		        return sum;
		      },      
		      getCheckedAll(){ //计算是否全部勾选
		        return this.cartList.length == this.getCheckedCount ? true : false;
		      },
					getCheckedAmount() { //计算勾选商品总金额
									let amount = 0;
									this.cartList.forEach((item) => {
										if (item.is_checked) amount += item.price * item.count;
									});
									return amount;
								}, 
		    },
		methods: {
			//获取用户购物车数据
			 getCartData() {
			        this.cartList = [] ; //清空
			        getCartListAPI().then(result => {
			          this.cartList = result.data;
			          this.isCheckedAll = this.getCheckedAll;    // 重置isCheckedAll属性值
			        }).catch(()=>{});
			      },
 
			//触发更改购物商品数量
			onCountChanged(item) {
				//准备参数
				let params = {
					id: item.id,
					count: item.count
				};
				//调用接口
				updateCartCountAPI(params).then(() => {});
			},
 
			//触发更改购物商品选中状态
		  onCheckedChange(item) {
		        let id = item.id;
		        let is_checked = item.is_checked == true ? 1 : 0;
		        let params = {  id,         is_checked     };       
		        updateCartCheckedAPI(params).then(() => {
		              this.isCheckedAll = this.getCheckedAll;    // 重置isCheckedAll属性值
		        }).catch(()=>{});          
		      },
 
			//触发删除购物商品
			onClickDeleteCartItem(id) {
				let ids = id;
				deleteCartItemAPI(ids).then(() => {
					this.getCartData();
				});
			},
			//触发全选/全不选
			      onSelectAll(){
			        let is_checked = this.isCheckedAll == true ? 1 : 0;
			        updateCartCheckedAllAPI(is_checked).then(()=>{
			          this.getCartData();
			        });
			      },
			 //触发清空
			      onClickDeleteAll() {
			        showConfirmDialog({
			          message: '客官，您确定清空购物车吗?'
			        }).then(() => {
			          deleteCartAllAPI().then(()=>{
			            this.getCartData();
			          });         
			        })
			      },
								 //触发创建订单
								      onClickCreateOrder() {
								        if (this.cartList.length === 0) {
								          showToast("您的购物车为空");
								          return;
								        }
								        //跳转到创建订单页面（根据购物车创建）
								        this.$router.push({
								          name: "orderCreate"
								        });
								      },
		},
	};
</script>
 
<style lang="less" scoped>
	.shopcart-container {
		padding: 0px 10px;
 
		.cart_header {
			padding: 10px;
			margin: 10px 0;
			height: 20px;
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
 
	.van-checkbox {
		justify-content: center;
	}
 
	.title {
		padding: 5px 5px;
		font-size: 12px;
		line-height: 20px;
	}
 
	.price {
		padding-left: 10px;
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		color: red;
		display: flex;
		align-items: center;
	}
 
	.opration {
		padding-right: 10px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
 
	.red {
		color: red;
		font-weight: bold;
		font-size: 16px;
	}
</style>
